<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Web Component</title>
	<style type="text/css">
	user-card{ font-size: 24px; }
	</style>
</head>
<body>
<user-card name1='xx1' name2='xx2' name3='xx3'></user-card>
<user-card name1='yy1' name2='yy2' name3='yy3'></user-card>

<template id="userCardTemplate">
	<div class="username username1"></div>
	<div class="username username2"></div>
	<div class="username username3"></div>
</template>
<script type="text/javascript">
class UserCard extends HTMLElement {
	constructor() {
		super();
		var templateElem = document.getElementById('userCardTemplate');
		//var shadow = this.attachShadow( { mode: 'closed' } );//可以隐藏代码
		var content = templateElem.content.cloneNode(true);
		content.querySelector('.username1').innerText = this.getAttribute('name1');
		content.querySelector('.username2').innerText = this.getAttribute('name2');
		content.querySelector('.username3').innerText = this.getAttribute('name3');
		// 添加事件1
		this.$username1 = content.querySelector('.username1');
		this.$username1.addEventListener('click', () => {
			console.log(this.$username1.innerHTML, 11);
		});
		// 添加事件2
		this.$username2 = content.querySelector('.username2');
		this.$username2.addEventListener('click', () => {
			console.log(this.$username2.innerHTML, 22);
		});
		this.appendChild(content);
	}
}  
window.customElements.define('user-card', UserCard); 
</script>
</body>
</html>